<template>
    <div class="addgoods">
        <div class="content">
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="informat">
                <i class="el-icon-info"></i>
                <p>添加商品信息</p>
            </div>
            <!-- 步骤条 -->
            <el-steps :active="active" finish-status="success" align-center style="margin-top:10px;">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
            </el-steps>
            <!-- 侧栏 --> 
            <el-tabs :tab-position="tabPosition" style="height:463px;overflow:auto;" @tab-click="next" v-model="bar">
                <el-tab-pane label="基本信息">
                    <el-form label-width="80px" :model="formLabelAlign">
                    <el-form-item label="商品名称">
                        <el-input v-model="formLabelAlign.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格">
                        <el-input v-model="formLabelAlign.region"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量">
                        <el-input v-model="formLabelAlign.type"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input v-model="formLabelAlign.num"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类"></el-form-item>
                    <el-cascader
                        :options="options"
                        v-model="classification"
                        @change="handleChange"
                        :props="{
                                    value: 'cat_id',
                                    label: 'cat_name',
                                    children: 'children'
                                }"
                    ></el-cascader>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="商品参数" @tab-click="shop" style="overflow:auto">
                    <div v-show="show" v-for="(item,i) in banben" :key="i">
                        <div class="bao">
                            <p>{{item.attr_name}}</p>
                            <div class="baoa">
                                <div class="box" v-for="(item2, index2) in item.attr_vals.split(',')" :key="index2"> 
                                    <el-button style="border:1px solid #409eff;">
                                        <i class="el-icon-check"></i>
                                        <span>{{item2}}</span>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="商品属性" style="height:100%;overflow:auto">
                        <div v-show="show" v-for="(v,i) in arr" :key="i" class="all">
                            <span>{{v.attr_name}}</span>
                            <el-input v-model="v.attr_vals" placeholder="请输入内容">{{v.attr_vals}}</el-input>
                        </div>
                </el-tab-pane>
                <el-tab-pane label="商品图片">
                    <el-upload
                    v-show="show"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change="handleChange2"
                    :file-list="fileList"
                    >
                    <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容">
                    <el-button plain @click="adds">添加商品</el-button>
                    <template>
                    <quill-editor
                        class="editor"
                        ref="myTextEditor"
                        v-model="content"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)"
                        @change="onEditorChange($event)"
                    ></quill-editor>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { datalist,adds,Parameterlist } from "../api/api.js";
export default {
  data() {
    return {
      tabPosition: "left",
      active: 0,
      classification: "",
      bar: "0",
      show: false,
      num: "",
      color: '#409EFF',
      arr:"",
      banben:"",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        num: ""
      },
      value: "",
      options: [],
      input: "",
      fileList: [],
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"] // 链接、图片、视频
          ] //工具菜单栏配置
        },
        placeholder: "请在这里添加产品描述", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true //语法检测
      }
    };
  },
  created() {
    this.datalist();
  },
  methods: {
    next() {
      this.active = this.bar;
      console.log(this.bar);
      this.active++;
      if (this.classification != "") {
        this.show = true;
        if (this.bar == 1) {
          this.shop();
        }
        if (this.bar == 2) {
            this.b();
          console.log("3333");
        }
      }
    },
    handleChange(value) {
      console.log(value);
      this.value = value.join(",");
      this.num = value.join(",").slice(4);
      console.log(this.num);
    },
    datalist() {
      datalist({
        type: 3
      }).then(res => {
        if (res.status == 200) {
          this.options = res.data.data;
          console.log("数据列表", res);
        }
      });
    },
    // 添加商品
    adds() {
      adds({
        goods_name: this.formLabelAlign.name,
        goods_cat: this.value,
        goods_price: this.formLabelAlign.region,
        goods_number: this.formLabelAlign.num,
        goods_weight: this.formLabelAlign.type
      }).then(res => {
        if (res.data.meta.status >= 200 && res.data.meta.status <= 300)
          console.log("添加商品", res);
      });
    },
    onEditorChange(editor) {
      this.content = editor.html;
      console.log(editor);
    },
    // 失去焦点
    onEditorBlur(editor) {},
    // 获得焦点
    onEditorFocus(editor) {},
    // 开始
    onEditorReady(editor) {},
    shop() {
      Parameterlist({
        id: this.num,
        sel: "many"
      }).then(res => {
          if(res.data.meta.status==200){
               console.log(res);
            this.banben=res.data.data;
            
          }
      });
    },
    b(){
      Parameterlist({
        id: this.num,
        sel: "only"
      }).then(res => {
          if(res.data.meta.status==200){
              this.arr=res.data.data;
               console.log(this.arr);
            
          }
      });  
    },
    handleChange2(){
        console.log("111");
    }
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    }
  }
};
</script>

<style scoped lang="scss">
    .addgoods{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        font-size:14px;
        .content{
            width:97%;
            height:95%;
            .informat{
                width:100%;
                height:38px;
                background-color:#f0f0f0;
                border-radius: 5px;
                margin-top:28px;
                display:flex;
                justify-content: center;
                align-items:center;
                color:#605d5d;
                i{
                    padding-right:8px;
                }
            }
            .bao{
                width:100%;
                display:flex;
                flex-direction: column;
                margin-bottom: 22px;
                p{
                    padding: 12px 0 20px;
                }
                .baoa{
                    display:flex;
                    .box{
                        display:flex;
                        padding-right:10px;
                        i{
                            width:17px;
                            height:17px;
                            background-color:#409eff;
                            color:white;
                        }
                    }
                }
            }
            .all{
                margin-bottom:25px;
                span{
                    display:block;
                    padding:12px 0 20px;
                }
            }
        }
    }
</style>
